Ext.onReady(function() {

	var vecLayer = new OpenLayers.Layer.Vector("vector");
	
	var  store = new GeoExt.data.FeatureStore({
        layer: vecLayer,
        fields: [
            {name: 'name', type: 'string'},
            {name: 'elevation', type: 'float'}
        ],
        proxy: new GeoExt.data.ProtocolProxy({
            protocol: new OpenLayers.Protocol.HTTP({
                	url: "../../resources/json/summits.json"
				,	format: new OpenLayers.Format.GeoJSON()
            })
        }),
        autoLoad: true
    });
	
	var geogrid = new GBIF.GeoSpatial.FeatureGrid({
				store:store
	})

 	var geoMapPanel = new GBIF.GeoSpatial.MapComponent({
				height: 400
			,   width: 500
			,	region : 'center'
			,	border: false
			,	title : "Layer Preview"
	});
	
        var political = new OpenLayers.Layer.WMS("State Boundaries",
            "http://demo.opengeo.org/geoserver/wms", 
            {'layers': 'topp:tasmania_state_boundaries', transparent: true, format: 'image/gif'},
            {isBaseLayer: true}
        );

        var roads = new OpenLayers.Layer.WMS("Roads",
            "http://demo.opengeo.org/geoserver/wms", 
            {'layers': 'topp:tasmania_roads', transparent: true, format: 'image/gif'},
            {isBaseLayer: false}
        );

        var cities = new OpenLayers.Layer.WMS("Cities",
            "http://demo.opengeo.org/geoserver/wms", 
            {'layers': 'topp:tasmania_cities', transparent: true, format: 'image/gif'},
            {isBaseLayer: false}
        );

        var water = new OpenLayers.Layer.WMS("Bodies of Water",
            "http://demo.opengeo.org/geoserver/wms", 
            {'layers': 'topp:tasmania_water_bodies', transparent: true, format: 'image/gif'},
            {isBaseLayer: false}
        );

        var highlight = new OpenLayers.Layer.Vector("Highlighted Features", {
            displayInLayerSwitcher: false, 
            isBaseLayer: false 
        });
        
        geoMapPanel.map.addLayers([vecLayer,political, roads, cities, water, highlight]); 

        var info = new OpenLayers.Control.WMSGetFeatureInfo({
            url: 'http://demo.opengeo.org/geoserver/wms', 
            title: 'Identify features by clicking',
            queryVisible: true,
            buildWMSOptions:  function(url, layers, clickPosition,  format) {
		 	        var layerNames = [], styleNames = [];
		 	        for (var i = 0, len = layers.length; i < len; i++) {
		 	            layerNames = layerNames.concat(layers[i].params.LAYERS);
		 	            styleNames = styleNames.concat(this.getStyleNames(layers[i]));
		 	        }
		 	        var params = OpenLayers.Util.extend({
		 	            service: "WMS",
		 	            version: layers[0].params.VERSION,
		 	            request: "GetFeatureInfo",
		 	            layers: layerNames,
		 	            query_layers: layerNames,
		 	            styles: styleNames,
		 	            bbox: this.map.getExtent().toBBOX(null,
		 	                layers[0].reverseAxisOrder()),
		 	            feature_count: this.maxFeatures,
		 	            height: this.map.getSize().h,
		 	            width: this.map.getSize().w,
		 	            format: format,
						info_format: "text/html",
						type:'POST'
				    }, (parseFloat(layers[0].params.VERSION) >= 1.3) ?
		 	            {
		 	                crs: this.map.getProjection(),
		 	                i: clickPosition.x,
		 	                j: clickPosition.y
		 	            } :
		 	            {
		 	                srs: this.map.getProjection(),
		 	                x: clickPosition.x,
		 	                y: clickPosition.y
		 	            }
		 	        );
		 	        OpenLayers.Util.applyDefaults(params, this.vendorParams);
		 	        return {
		 	            url: url,
		 	            params: OpenLayers.Util.upperCaseObject(params),
		 	            callback: function(request) {
			                this.handleResponse(clickPosition, request);
		 	            },
		 	            scope: this
		 	        };
		 	    },
			eventListeners: {
                getfeatureinfo: function(event) {
                    geoMapPanel.map.addPopup(new OpenLayers.Popup.FramedCloud(
                        "chicken", 
                        geoMapPanel.map.getLonLatFromPixel(event.xy),
                        null,
                        event.text,
                        null,
                        true
                    ));
                }
            }
        });
        geoMapPanel.map.addControl(info);
        info.activate();



    geoMapPanel.map.setCenter(new OpenLayers.Bounds(-140.444336,25.115234,-44.438477,50.580078).getCenterLonLat(), 4);

	var main =new Ext.Panel({
				layout:'border'
			,	renderTo:Ext.getBody()
			,	items:[geoMapPanel,geogrid]
			,	height:600
	});

});


